<template>
    <div id="login">
        <el-dialog title="登录" width="300px" center :visible.sync="isLogin">
            <el-form :model="LoginUser" :rules="rules" status-icon ref="ruleForm" class="demo-ruleForm">
                <el-form-item prop="name">
                    <el-input prefix-icon="el-icon-user-solid"
                              placeholder="请输入账号"
                              v-model="LoginUser.username"
                              clearable></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input
                            prefix-icon="el-icon-view"
                            type="password"
                            placeholder="请输入密码"
                            v-model="LoginUser.paw"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="Login" style="width:100%;">登录</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions} from "vuex";
    import myStorage from "../utils/myStorage";
    import {setCookie} from "../utils/myCookie";

    export default {
        name: "Login",
        data() {

            return {
                order:[],
                orderList:[],
                LoginUser: {
                    username: "",
                    paw: ""
                },
                rules: {
                    name: [{trigger: "blur"}],
                    pass: [{trigger: "blur"}]
                }
            }
        },
        computed: {
            // 获取vuex中的showLogin，控制登录组件是否显示
            isLogin: {
                get() {
                    return this.$store.getters.getShowLogin;
                },
                set(val) {
                    this.$refs["ruleForm"].resetFields();
                    this.setShowLogin(val);
                }
            }
        },
        methods: {
            ...mapActions(["setUser", "setShowLogin", "setUserAddress", "setUserOrderList", "setUserToken"]),
            Login() {
                this.$refs["ruleForm"].validate(valid => {
                    //如果通过校验开始登录
                    if (valid) {
                        this.$axios
                            //登录接口
                            .post("/member/login", {
                                userName: this.LoginUser.username,
                                userPwd: this.LoginUser.paw
                            })
                            .then(res => {
                                // “200”代表登录成功，其他的均为失败
                                if (res.data.result.message == null) {
                                    // 隐藏登录组件
                                    this.isLogin = false;
                                    // 隐藏验证码框
                                    this.isShowVcode = false;
                                    // 登录信息存到本地
                                    let user = JSON.stringify(res.data.result);
                                    let userToken = JSON.stringify(res.data.result.token);
                                    myStorage.setItem({name: "user", value: user, expires: 900000});
                                    myStorage.setItem({name: "userToken", value: userToken, expires: 900000});
                                    // setCookie('user',user,15);
                                    // setCookie('userToken',userToken,15);
                                    // 登录信息存到vuex
                                    this.setUser(res.data.result);
                                    this.setUserToken(res.data.result.token);
                                    // 弹出通知框提示登setUserToken录成功信息
                                    this.notifySucceed("登录成功");
                                    this.getUserAddressList();
                                } else {
                                    // 清空输入框的校验状态
                                    this.$refs["ruleForm"].resetFields();
                                    // 弹出通知框提示登录失败信息
                                    this.notifyError(res.data.result.message);
                                }
                            })
                            .catch(err => {
                                return Promise.reject(err);
                            });
                    } else {
                        return false;
                    }
                });
            },
            //用户地址
            getUserAddressList() {
                this.$axios
                    .get("/item/getlistaddress", {
                        params: {
                            userId: this.$store.getters.getUser.id
                        }
                    })
                    .then(res => {
                            //用户收货地址信息保存到vuex
                            this.setUserAddress(res.data.result);
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            },

        }
    }
</script>

<style scoped>


</style>
